<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>医生预约</title>

    <link rel="stylesheet" href="css/modules/code.css">
    <link rel="stylesheet" href="css/modules/laydate/default/laydate.css">
    <link rel="stylesheet" href="css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/appDoc.css">

<#include "common/common-head.html"/>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">居家养老系统欢迎您！</div>
        <ul class="layui-nav" style="margin-left: 200px;">
            <li class="layui-nav-item"><a href="/index">老人信息输入</a></li>
            <li class="layui-nav-item"><a href="/orderDoctor">医生预约</a></li>
            <li class="layui-nav-item"><a href="/orderVol">志愿者预约</a></li>
        </ul>
    </div>
</div>

<div>
    <div class=fieldContainer>
        <fieldset class="layui-elem-field layui-field-title linelong" style="margin-top: 30px;">
            <legend><i class="layui-icon">&#xe612;</i> <span class="doc">李医生</span></legend>
            <legend style="padding-left:100px ;"><i class="biaoti"><i class="layui-icon">&#xe68e;</i> 医院:<span
                    class="yy">福州市第一医院</span></i><i class="biaoti">性质：三级甲等医院 </i><i class="biaoti">科室：<span class="ks">心脏外科</span></i><i
                    class="biaoti">职称：主任医师</i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe715;</i> <i class="biaoti">
                地址：福建省福州市茶中路20号</i><i class="layui-icon">&#xe678;</i><i class="biaoti"> 联系电话：0591-87983333 </i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe705;</i> 简介：XXXXXXXXXX</legend>
            <button class="layui-btn layui-btn-sm doc-sub-btn">预约</button>
            <form method="post" class="layui-form" action="">
                <div class="layui-form">
                    <div class="layui-form-item" style="padding-left:80px ;">
                        <div class="layui-inline">
                            <label class="layui-form-label">预约日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input data" id="test1" lay-verify="required"
                                       placeholder="点击此处选择日期">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>

    <div class=fieldContainer>
        <fieldset class="layui-elem-field layui-field-title linelong" style="margin-top: 30px;">
            <legend><i class="layui-icon">&#xe612;</i> <span class="doc">叶医生</span></legend>
            <legend style="padding-left:100px ;"><i class="biaoti"><i class="layui-icon">&#xe68e;</i> 医院:<span
                    class="yy">福州眼科医院</span></i><i class="biaoti">性质：三级眼科专科医院 </i><i class="biaoti">科室：<span class="ks">白内障专科</span></i><i
                    class="biaoti">职称：副院长</i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe715;</i><i class="biaoti">
                地址：福州市仓山区六一南路88号</i><i class="layui-icon">&#xe678;</i><i class="biaoti"> 联系电话：0591-88510638 </i>
            </legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe705;</i> 简介：XXXXXXXXXX</legend>
            <button class="layui-btn layui-btn-sm doc-sub-btn">预约</button>
            <form method="post" class="layui-form" action="">
                <div class="layui-form">
                    <div class="layui-form-item" style="padding-left:80px ;">
                        <div class="layui-inline">
                            <label class="layui-form-label">预约日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input data" id="test2" lay-verify="required"
                                       placeholder="点击此处选择日期">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>

    <div class=fieldContainer>
        <fieldset class="layui-elem-field layui-field-title linelong" style="margin-top: 30px;">
            <legend><i class="layui-icon">&#xe612;</i> <span class="doc">黄医生</span></legend>
            <legend style="padding-left:100px ;"><i class="biaoti"><i class="layui-icon">&#xe68e;</i> 医院:<span
                    class="yy">福州市第八医院</span></i><i class="biaoti">性质：二级甲等医院 </i><i class="biaoti">科室：<span class="ks">内科</span></i><i
                    class="biaoti">职称：副主任医师</i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe715;</i> <i class="biaoti">
                地址：福州市晋安区沁园支路71号</i><i class="layui-icon">&#xe678;</i><i class="biaoti"> 联系电话：0591-87588284 </i>
            </legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe705;</i> 简介：XXXXXXXXXX</legend>
            <button class="layui-btn layui-btn-sm doc-sub-btn">预约</button>
            <form method="post" class="layui-form" action="">
                <div class="layui-form">
                    <div class="layui-form-item" style="padding-left:80px ;">
                        <div class="layui-inline">
                            <label class="layui-form-label">预约日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input data" id="test3" lay-verify="required"
                                       placeholder="点击此处选择日期">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>

    <div class=fieldContainer>
        <fieldset class="layui-elem-field layui-field-title linelong" style="margin-top: 30px;">
            <legend><i class="layui-icon">&#xe612;</i> <span class="doc">王医生</span></legend>
            <legend style="padding-left:100px ;"><i class="biaoti"><i class="layui-icon">&#xe68e;</i> 医院:<span
                    class="yy">福州市第八医院</span></i><i class="biaoti">性质：综合性二级甲等医院 </i><i class="biaoti">科室：<span
                    class="ks">外科</span></i><i class="biaoti">职称：主任医师</i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe715;</i> <i class="biaoti">
                地址：福州市晋安区沁园支路71号</i><i class="layui-icon">&#xe678;</i><i class="biaoti"> 联系电话：0591-87588284 </i>
            </legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe705;</i> 简介：XXXXXXXXXX</legend>
            <button class="layui-btn layui-btn-sm doc-sub-btn">预约</button>
            <form method="post" class="layui-form" action="">
                <div class="layui-form">
                    <div class="layui-form-item" style="padding-left:80px ;">
                        <div class="layui-inline">
                            <label class="layui-form-label">预约日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input data" id="test4" lay-verify="required"
                                       placeholder="点击此处选择日期">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>

    <div class=fieldContainer>
        <fieldset class="layui-elem-field layui-field-title linelong" style="margin-top: 30px;">
            <legend><i class="layui-icon">&#xe612;</i> <span class="doc">赵医生</span></legend>
            <legend style="padding-left:100px ;"><i class="biaoti"><i class="layui-icon">&#xe68e;</i> 医院:<span
                    class="yy">福州市中医院</span></i><i class="biaoti">性质：三级甲等医院 </i><i class="biaoti">科室：<span class="ks">肿瘤科</span></i><i
                    class="biaoti">职称：主任医师</i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe715;</i> <i class="biaoti">
                地址：福州市鼓楼区鼓东路102号</i><i class="layui-icon">&#xe678;</i><i class="biaoti"> 联系电话：0591-87678576 </i>
            </legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe705;</i> 简介：XXXXXXXXXX</legend>
            <button class="layui-btn layui-btn-sm doc-sub-btn">预约</button>
            <form method="post" class="layui-form" action="">
                <div class="layui-form">
                    <div class="layui-form-item" style="padding-left:80px ;">
                        <div class="layui-inline">
                            <label class="layui-form-label">预约日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input data" id="test5" lay-verify="required"
                                       placeholder="点击此处选择日期">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>

    <div class=fieldContainer>
        <fieldset class="layui-elem-field layui-field-title linelong" style="margin-top: 30px;">
            <legend><i class="layui-icon">&#xe612;</i> <span class="doc">吴大夫</span></legend>
            <legend style="padding-left:100px ;"><i class="biaoti"><i class="layui-icon">&#xe68e;</i> 医院:<span
                    class="yy">福州市中医院</span></i><i class="biaoti">性质：三级甲等医院 </i><i class="biaoti">科室：<span class="ks">呼吸内科</span></i><i
                    class="biaoti">职称：副主任医师</i></legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe715;</i><i class="biaoti">
                地址：福州市鼓楼区鼓东路102号</i><i class="layui-icon">&#xe678;</i><i class="biaoti"> 联系电话：0591-87678576 </i>
            </legend>
            <legend style="padding-left:100px ;"><i class="layui-icon">&#xe705;</i> 简介：XXXXXXXXXX</legend>
            <button class="layui-btn layui-btn-sm doc-sub-btn">预约</button>
            <form method="post" class="layui-form" action="" onsubmit="return false">
                <div class="layui-form">
                    <div class="layui-form-item" style="padding-left:80px ;">
                        <div class="layui-inline">
                            <label class="layui-form-label">预约日期</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input data"  lay-verify="required"
                                       placeholder="点击此处选择日期">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>
</div>
</body>

<script src="js/layui.all.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<script>

    layui.use(['layer', 'form'], function () {
        let layer = layui.layer
                , form = layui.form;

        form.render();
    });

    layui.use('laydate', function () {
        let laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });
        laydate.render({
            elem: '#test3'
        });
        laydate.render({
            elem: '#test4'
        });
        laydate.render({
            elem: '#test5'
        });
        laydate.render({
            elem: '#test6'
        });

    });


    $('.doc-sub-btn').click(function () {
        let b = $('.doc-sub-btn').index($(this));
        console.log(b);
        var date = $(this).parents("fieldset").find(".data").val();
        if (date == '') {
            layui.use('layer', function () {
                let layer = layui.layer;
                layer.msg('请选择预约时间');
            });
        } else {
            var doc = $(this).parents("fieldset").find(".doc").text();
            var yy = $(this).parents("fieldset").find(".yy").text();
            var ks = $(this).parents("fieldset").find(".ks").text();
            layui.use('layer', function () {
                let layer = layui.layer;
                //layer.msg('预约成功');
                $.ajax({
                    type: "post",
                    url: "/orderDoctor",//qiangge
                    data: {doc: doc, yy: yy,ks:ks,date:date},//修改为医生和预约时间
                    success: function (data) {
                        alert(data);
                    }
                });
            });
        }
    });


</script>
</html>
